<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX的学习</title>
</head>
<body>
    <!-- <p>1112</p> -->
    <a class="a1">点击1</a>
    <a class="a2">点击2</a>
</body>
<script src="./ajax.js"></script>
<script>
    const p = document.querySelector('p')
    const a1 = document.querySelector('.a1')
    const a2 = document.querySelector('.a2')

    a1.addEventListener('click', () => {
        onA1Click()   
    })

    a2.addEventListener('click', () => {
        onA2Click()   
    })

    function onA1Click() {
        var xhr = new XMLHttpRequest()
        xhr.open('get', 'http://localhost:3888/user/login', true)
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4) {
                if(xhr.status === 200) {
                    console.log('输出小黄人：', xhr.responseText)
                }
            }
        }
        xhr.send(null)
    }

    function onA2Click() {
        var xhr = new XMLHttpRequest()
        xhr.open('post', 'http://localhost:3888/user/register', true)
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4) {
                if(xhr.status === 200) {
                    console.log('输出小黄人：', xhr.responseText)
                }
            }
        }
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(JSON.stringify({user_name: "cellophane111",password: "12345622"}))
    }

    
</script>
</html>